/* 自定义 element 暗黑模式 */
$bg-color: #191919;
$bg-color-content: #141414;
$content-hover: #464646;
$color: var(--el-text-color-primary);
html.dark {
  /* wangEditor */
  --w-e-toolbar-color: #eeeeee;
  --w-e-toolbar-bg-color: #141414;
  --w-e-textarea-bg-color: #141414;
  --w-e-tr-bg-color: #141414;
  --w-e-textarea-color: #eeeeee;
  --w-e-toolbar-active-bg-color: #464646;
  --w-e-toolbar-border-color: var(--el-border-color-darker);
  .w-e-bar-item button:hover,
  .w-e-menu-tooltip-v5::before {
    color: #eeeeee;
  }

  /* login */
  .login-container {
    background-color: $bg-color !important;
    .login-box {
      background-color: rgb(0 0 0 / 80%) !important;
      .login-form {
        box-shadow: rgb(255 255 255 / 12%) 0 2px 10px 2px !important;
        .logo-text {
          color: var(--el-text-color-primary) !important;
        }
      }
    }
  }

  /** home */
  .statistics {
    .item-left {
      .tit {
        color: var(--el-text-color-primary) !important;
      }
      .num {
        color: var(--el-text-color-primary) !important;
      }
    }
    .statistics-item {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
    }
  }
  .my-daily {
    .title {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
    }
    .collapse-cot {
      border-color: var(--el-aside-border-color) !important;
    }
    .list-item {
      border-color: var(--el-border-color-light) !important;
      .item-title {
        color: var(--el-text-color-primary) !important;
      }
    }
  }
  .resource-list,
  .project-list,
  .task-list {
    li {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
      border-color: var(--el-aside-border-color) !important;
    }
  }
  .my-project,
  .my-task,
  .my-resource,
  .my-daily {
    color: var(--el-text-color-primary) !important;
    background-color: $bg-color !important;
  }

  /** 通讯录 */
  .contacts,
  .contacts-pj {
    .contacts-left {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
      .tab {
        border-color: var(--el-aside-border-color) !important;
        .rd {
          background-color: var(--el-aside-border-color) !important;
        }
      }
      .title {
        color: var(--el-text-color-primary) !important;
      }
      .bottom .tab-1 li {
        border-color: var(--el-aside-border-color) !important;
        .name span {
          color: var(--el-text-color-primary) !important;
        }
        span {
          color: var(--el-text-color-primary) !important;
        }
      }
      .tab-2 {
        .custom-tree-node {
          color: var(--el-text-color-primary) !important;
        }
        .custom-tree-node-leaf span {
          color: var(--el-text-color-primary) !important;
        }
      }
      .el-tree-node__expand-icon {
        color: var(--el-text-color-primary) !important;
      }
    }
    .user-info-left .user-info-left-info .name .name-text {
      color: var(--el-text-color-primary) !important;
    }
    .user-info-left .user-info-left-info {
      .zz span {
        color: var(--el-text-color-primary) !important;
      }
      .dh span i {
        color: var(--el-text-color-primary) !important;
      }
    }
    .user-option .option-tj li {
      border-color: var(--el-aside-border-color) !important;
      span {
        color: var(--el-text-color-primary) !important;
      }
    }
    .contacts-right .user-info {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
    }
  }

  /** */
  .summary-left-project {
    background-color: $bg-color !important;
  }
  .table-box .el-table .el-table__header th {
    color: var(--el-text-color-primary) !important;
    background-color: $bg-color !important;
  }
  .detail .el-tabs .el-tabs__header {
    color: var(--el-text-color-primary) !important;
    background-color: $bg-color !important;
  }
  .summary,
  .detail-wrap-content-bottom {
    .summary-left {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
      .summary-left-title {
        color: inherit;
        background-color: inherit;
      }
    }
    .summary-outline-wrap {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
      .summary-outline-title-big {
        color: var(--el-text-color-primary) !important;
      }
      .summary-outline-table {
        .summary-outline-custom {
          background-color: #222222;
          .custom-title {
            color: inherit;
          }
          .custom-title-edit {
            .el-input__wrapper {
              color: inherit;
              background-color: inherit;
            }
            .el-textarea__inner {
              color: inherit;
              background-color: inherit;
            }
          }
          .el-textarea .el-textarea__inner {
            background-color: #222222;
          }
        }
        .table-content-list li span {
          color: var(--el-text-color-primary) !important;
        }
      }
      .summary-outline-title {
        color: inherit;
      }
      .outline-info-title {
        color: inherit;
      }
      .summary-outline-table-title {
        color: inherit;
      }
      .summary-outline-btn {
        color: var(--el-text-color-primary) !important;
        background: transparent;
      }
    }
    .summary-right {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
      .summary-right-total {
        .total-tit {
          color: inherit;
        }
        .total-list p span {
          color: var(--el-text-color-primary) !important;
        }
      }
      .summary-right-project {
        color: var(--el-text-color-primary) !important;
        border-color: var(--el-aside-border-color) !important;
        .title span {
          color: var(--el-text-color-primary) !important;
        }
        .status {
          color: inherit;
        }
        .description span {
          color: var(--el-text-color-primary) !important;
        }
      }
    }
    .graph {
      background-color: $bg-color !important;
    }
    .personnel {
      background-color: $bg-color !important;
    }
    .summary-left-list {
      color: var(--el-text-color-primary);
      li {
        color: inherit;
        background: #222222;
      }
    }
  }
  .summary-outline-wrap .summary-outline-table-title {
    span {
      color: var(--el-text-color-primary) !important;
    }
  }
  .el-input.is-disabled .el-input__inner {
    color: var(--el-text-color-primary) !important;
    -webkit-text-fill-color: var(--el-text-color-primary) !important;
  }
  .outline-info-list {
    li {
      span {
        color: var(--el-text-color-primary) !important;
      }
    }
  }
  .detail-wrap,
  .detail-wrap-order {
    .detail-wrap-left {
      background-color: $bg-color !important;
    }
    .task-list-wrap {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
      .item-list-item li span {
        color: inherit;
      }
    }
    .detail-wrap-right {
      color: var(--el-text-color-primary) !important;
      .task-info-ul {
        li {
          color: inherit;
          span {
            color: inherit !important;
          }
        }
        .upload-wrap {
          span:first-child {
            background-color: #222222 !important;
          }
          .el-button {
            span {
              background: transparent !important;
            }
          }
        }
      }
      .task-info-title {
        color: inherit;
      }
      .task-info-wrap {
        color: var(--el-text-color-primary) !important;
        background-color: $bg-color !important;
      }
    }
    .detail-wrap-content {
      .detail-wrap-content-top {
        background-color: $bg-color !important;
        .list-outcome li {
          color: inherit;
        }
      }
      .detail-wrap-content-bottom {
        background-color: $bg-color !important;
      }
    }
    .stage-list {
      li {
        color: var(--el-text-color-primary) !important;
        background: #222222 !important;
        .title-box {
          color: inherit;
        }
      }
    }
    .el-input__wrapper {
      background-color: inherit;
    }
    .el-input__wrapper .el-input__inner {
      color: var(--el-text-color-primary) !important;
    }
  }
  .detail-wrap-order {
    .detail-wrap-content {
      .detail-wrap-content-bottom {
        background-color: transparent !important;
      }
    }
  }
  .history-m {
    border-color: var(--el-border-color-light) !important;
    .history-left {
      span {
        color: var(--el-text-color-primary) !important;
      }
    }
    .history-right {
      p {
        span {
          color: var(--el-text-color-primary) !important;
        }
      }
    }
  }
  .project {
    .project-search {
      background-color: $bg-color !important;
    }
    .project-content {
      background-color: $bg-color !important;
      .cot-list li {
        background-color: $bg-color !important;
        border-color: var(--el-border-color-light) !important;
        span {
          color: var(--el-text-color-primary) !important;
        }
      }
      .cot-list-wrap .li {
        background-color: $bg-color !important;
        border-color: var(--el-border-color-light) !important;
        span {
          color: var(--el-text-color-primary) !important;
        }
        .tit-part,
        .content,
        .info {
          color: var(--el-text-color-primary) !important;
          i {
            color: var(--el-text-color-primary) !important;
          }
        }
        .tit-right {
          color: var(--el-text-color-primary) !important;
        }
      }
    }
  }
  .main-menu .menu-list {
    color: var(--el-text-color-primary) !important;
    background-color: $bg-color !important;
  }
  .el-container .menu-list-wrap .title {
    color: var(--el-text-color-primary) !important;
  }
  .title {
    color: var(--el-text-color-primary) !important;
  }
  .project-preview .scheme-cot {
    background-color: $bg-color !important;
  }
  .r-preview-mask-contain {
    background-color: $bg-color !important;
  }
  .project-table-content-title {
    span {
      color: var(--el-text-color-primary) !important;
    }
  }
  .summary-outline-wrap .summary-outline-custom .el-textarea .el-textarea__inner {
    color: var(--el-text-color-primary) !important;
    background-color: #222222 !important;
  }
  .project-table-content {
    .el-textarea .el-textarea__inner,
    .el-input .el-input__wrapper {
      color: var(--el-text-color-primary) !important;
      background-color: #222222 !important;
    }
  }
  .summary-outline-wrap .outline-info .el-textarea .el-textarea__inner {
    background-color: #222222 !important;
  }
  .stage-config {
    border-color: var(--el-border-color-light) !important;
    .config-title {
      color: var(--el-text-color-primary) !important;
      border-color: var(--el-border-color-light) !important;
    }
    .config-left {
      border-color: inherit;
      .stage-list {
        .stage-item {
          background-color: #222222;
          .stage-time {
            color: var(--el-text-color-primary) !important;
          }
        }
        .title-box {
          .title-cot {
            color: var(--el-text-color-primary) !important;
          }
          .el-input .el-input__wrapper .el-input__inner {
            color: var(--el-text-color-primary) !important;
          }
        }
      }
    }
    .config-right .task-list .task-item .cot-task {
      .el-date-editor {
        .el-range__icon {
          color: var(--el-text-color-primary) !important;
        }
        .el-range-input {
          color: var(--el-text-color-primary) !important;
        }
      }
      .title-box {
        color: var(--el-text-color-primary) !important;
        .el-input .el-input__wrapper .el-input__inner {
          color: var(--el-text-color-primary) !important;
        }
      }
      .item-wrap .select-box {
        .el-input__wrapper .el-input__inner {
          color: var(--el-text-color-primary) !important;
        }
      }
      .item-wrap .add-btn {
        color: var(--el-text-color-primary) !important;
      }
      .item-wrap .item-time {
        color: var(--el-text-color-primary) !important;
      }
    }
  }
  .el-dialog {
    background-color: $bg-color !important;
    .el-upload,
    .el-input__wrapper,
    .el-textarea__inner,
    .el-upload-dragger,
    .el-select__wrapper {
      background-color: var(--el-dialog-bg-color) !important;
      border-color: var(--el-aside-border-color) !important;
      .el-input__inner {
        color: var(--el-text-color-primary) !important;
        background: inherit;
      }
    }
    .fixed {
      .el-select__selected-item {
        color: var(--el-text-color-primary) !important;
      }
    }
    .upload-text {
      background-color: $bg-color !important;
    }
    .info-form-group-title {
      color: var(--el-text-color-primary) !important;
    }
    .add-content-box {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
    }
    .add-content {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
      span {
        color: inherit;
        background: var(--el-aside-border-color) !important;
      }
    }
    .el-table {
      --el-table-header-bg-color: $bg-color;
    }
    .add-img-plus {
      color: var(--el-text-color-primary) !important;
      background: var(--el-aside-border-color) !important;
    }
    .d-upload-add {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
    }
    .produce-model-item,
    .produce-model-info {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
      border-color: var(--el-aside-border-color) !important;
      .produce-model-item-title {
        border: 1px solid var(--el-aside-border-color) !important;
        span {
          color: var(--el-text-color-primary) !important;
        }
      }
      span {
        color: inherit;
      }
      ul,
      li {
        border-color: var(--el-aside-border-color) !important;
      }
      .group-item {
        border-color: var(--el-aside-border-color) !important;
        span {
          color: var(--el-text-color-primary) !important;
        }
        span:first-child {
          background-color: $bg-color !important;
          border-right: 1px solid var(--el-aside-border-color) !important;
        }
      }
      .map-Wrap {
        border-color: var(--el-aside-border-color) !important;
        #result {
          border-color: var(--el-aside-border-color) !important;
        }
      }
    }
  }
  .dialog-form-report-daily .info-form .el-form-item:nth-child(2) .group .el-form-item:last-child {
    background-color: $bg-color-content !important;
  }

  /** 车辆管理 */
  .summary-content {
    background-color: $bg-color !important;
  }
  .summary-content-btn {
    background-color: var(--el-dialog-bg-color) !important;
  }
  .summary-content-bg {
    // background-color: $bg-color !important;
    background-color: var(--el-dialog-bg-color) !important;
    .el-upload,
    .el-input__wrapper,
    .el-textarea__inner,
    .el-upload-dragger,
    .el-select__wrapper {
      background-color: var(--el-dialog-bg-color) !important;
      border-color: var(--el-aside-border-color) !important;
      .el-input__inner {
        color: var(--el-text-color-primary) !important;
        background: inherit;
      }
    }
    .fixed {
      .el-select__selected-item {
        color: var(--el-text-color-primary) !important;
      }
    }
    .upload-text {
      background-color: $bg-color !important;
    }
    .info-form-group-title {
      color: var(--el-text-color-primary) !important;
    }
    .add-content-box {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
    }
    .add-content {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
      span {
        color: inherit;
        background: var(--el-aside-border-color) !important;
      }
    }
    .el-table {
      --el-table-header-bg-color: $bg-color;
    }
    .add-img-plus {
      color: var(--el-text-color-primary) !important;
      background: var(--el-aside-border-color) !important;
    }
    .d-upload-add {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
    }
    .produce-model-item,
    .produce-model-info {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color !important;
      border-color: var(--el-aside-border-color) !important;
      .produce-model-item-title {
        border: 1px solid var(--el-aside-border-color) !important;
        span {
          color: var(--el-text-color-primary) !important;
        }
      }
      span {
        color: inherit;
      }
      ul,
      li {
        border-color: var(--el-aside-border-color) !important;
      }
      .group-item {
        border-color: var(--el-aside-border-color) !important;
        span {
          color: var(--el-text-color-primary) !important;
        }
        span:first-child {
          background-color: $bg-color !important;
          border-right: 1px solid var(--el-aside-border-color) !important;
        }
      }
      .map-Wrap {
        border-color: var(--el-aside-border-color) !important;
        #result {
          border-color: var(--el-aside-border-color) !important;
        }
      }
    }
    .info-form-group-content {
      .map {
        background: var(--el-aside-border-color) !important;
      }
    }
  }
  .group-title,
  .group-wrap {
    color: var(--el-text-color-primary) !important;
    .text {
      color: inherit !important;
    }
  }

  /** 问题列表 */
  .question-container {
    &-left {
      background-color: $bg-color !important;
      &-tit,
      &-option {
        color: var(--el-text-color-primary) !important;
        i {
          color: var(--el-text-color-primary) !important;
        }
      }
      &-content {
        border-color: var(--el-aside-border-color) !important;
      }
    }
    &-right {
      background-color: $bg-color !important;
      &-tit {
        color: var(--el-text-color-primary) !important;
        background-color: $bg-color !important;
      }
      &-answer {
        background-color: $bg-color !important;
        &-item {
          .answer-item {
            .top {
              .tit-right {
                color: var(--el-text-color-primary) !important;
              }
            }
            .info {
              i {
                color: var(--el-text-color-primary) !important;
              }
            }
            .content-t p {
              color: var(--el-text-color-primary) !important;
            }
          }
          .comment-list .comment-tit {
            color: var(--el-text-color-primary) !important;
          }
        }
      }
      .btn {
        background-color: $bg-color !important;
      }
      .bd1 {
        border-color: var(--el-aside-border-color) !important;
      }
    }
  }

  /** wik表格 */
  .wik-table-row {
    color: var(--el-text-color-primary) !important;

    // background-color: $bg-color !important;
    .wik-table-row-item {
      color: inherit;
      border-color: var(--el-border-color-light) !important;
    }
  }
  .wik-table-header {
    color: var(--el-text-color-primary) !important;
    background-color: $bg-color-content !important;
    border-color: var(--el-border-color-light) !important;
    .wik-table-header-item {
      color: inherit;
      border-color: var(--el-border-color-light) !important;
    }
    .wik-table-header-item-title:hover {
      background-color: var(--el-table-row-hover-bg-color) !important;
    }
  }
  .wik-table-header-column-menu {
    color: var(--el-text-color-primary) !important;
    background-color: $bg-color !important;
    box-shadow: 0 0 16px rgb(255 255 255 / 8.1%);
    .wik-table-header-column-menu-wrap-content {
      color: inherit;
      &:hover {
        background-color: var(--el-text-color-secondary) !important;
      }
    }
    .line {
      background-color: var(--el-border-color-light) !important;
    }
  }
  .wik-table-row-hover {
    background-color: var(--el-table-row-hover-bg-color) !important;
  }
  .wik-pagination {
    background-color: $bg-color !important;
    .wik-pagination-title i {
      color: inherit;
    }
  }
  .wik-tools {
    color: var(--el-text-color-primary) !important;
    background-color: $bg-color !important;
    .wik-tools-left-search {
      border-color: var(--el-border-color-light) !important;
    }
    .wik-tools-left-total span {
      color: var(--el-text-color-primary) !important;
    }
  }
  .wik-table-feature-inner {
    background-color: $bg-color !important;
  }
  .wik-table {
    background-color: $bg-color !important;
    .wik-table-setting {
      .setting-table {
        background-color: $bg-color;
        border-color: var(--el-border-color-light) !important;
      }
    }
    .wik-table-sticky {
      background-color: $bg-color;
    }
    .wik-table-column-left-shadow {
      box-shadow: 6px 0 6px rgb(255 255 255 / 8.1%);
    }
  }
  .setting-dialog-body .content .cot li:hover,
  .setting-dialog-body .content .cot .li:hover {
    color: $primary-color !important;
    background-color: $content-hover;
  }
  .setting-dialog-body .content .cot {
    border-color: var(--el-border-color-light) !important;
  }
  .search-filter {
    background-color: $bg-color !important;
    box-shadow: 0 0 16px rgb(255 255 255 / 12%) !important;
    .search-filter-header {
      color: $color !important;
    }
  }

  /** wik dialog **/
  .wik-dialog {
    background-color: $bg-color !important;
    .wik-dialog-header {
      border-color: var(--el-border-color-light) !important;
      .wik-dialog-header__default {
        color: var(--el-text-color-primary) !important;
      }
      .close {
        color: var(--el-text-color-primary) !important;
      }
    }
  }

  /** wik-tabs **/
  .wik-tabs {
    border-color: var(--el-border-color-light) !important;
  }

  /** 订单 **/
  .order-page {
    .wik-column .wik-column-item {
      border-color: var(--el-border-color-light) !important;
    }
  }
  .order-detail {
    color: $color !important;
    &-info-title {
      color: inherit !important;
    }
    &-info-status-item {
      .status {
        color: inherit !important;
      }
    }
  }
  .order-info-line {
    border-color: var(--el-border-color-light) !important;
    .order-info-line-item {
      color: $color !important;
      border-color: var(--el-border-color-light) !important;
      span:last-child,
      span:first-child {
        color: inherit !important;
      }
      span {
        border-color: var(--el-border-color-light) !important;
      }
    }
  }
  .order-detail-log-list {
    background-color: $bg-color !important;
  }
  .order-detail-info {
    color: var(--el-text-color-primary) !important;
    border-color: var(--el-border-color-light) !important;
    &-number {
      color: var(--el-text-color-primary) !important;
      background-color: $bg-color-content;
    }
  }
  .order-detail-log {
    border-color: var(--el-border-color-light) !important;
    .order-detail-log-title {
      color: var(--el-text-color-primary) !important;
      border-color: var(--el-border-color-light) !important;
    }
    .order-detail-log-list-item {
      border-color: var(--el-border-color-light) !important;
    }
  }
  .order-detail-log-list-item-info {
    color: $color !important;
  }
  .order-detail-log-laster-cot-item {
    span:last-child {
      color: $color !important;
    }
  }
  .order-detail-log-laster-line {
    &::after {
      outline: none !important;
    }
  }
  .wik-document-top {
    color: $color !important;
    border-color: var(--el-border-color-light) !important;
    .el-button {
      color: $color !important;
    }
  }
  .customize-detail-text-area {
    background-color: $bg-color-content !important;
  }
  .wik-status-list {
    background-color: $bg-color !important;
    .wik-status-list-item-wrap:hover {
      background-color: var(--el-border-color-light) !important;
    }
  }
  .wik-people {
    background-color: $bg-color !important;
    .wik-people-list-item span {
      color: var(--el-text-color-primary) !important;
    }
    .wik-people-list-item:hover {
      background-color: var(--el-border-color-light) !important;
    }
  }
  .wik-dialog-footer__default {
    background-color: var(--el-border-color-light) !important;
  }
  .order-implement-record-sub {
    span {
      color: var(--el-text-color-primary) !important;
    }
  }

  /** 滚动条 */
  ::-webkit-scrollbar-thumb {
    background-color: rgb(255 255 255 / 15%);
    border-radius: 20px;
  }
}
